<template>
	<div class="MainList">
		<div class="tab2-bottom">
			<ol>
				<li v-for="item in twoList" :key="item.id">
					<router-link to="/">
						<img :src="item.imgURL" />
							<p>
								<span>{{item.title}}</span>
								<span>{{item.msg}}</span>
							</p>
					</router-link>
				</li>
			</ol>
		</div>
		<div class="tab3-bottom">
			<ul>
				<li v-for="item in twoList1" :key="item.id">
					<router-link to="/">
						<p>
							<span>{{item.name}}</span>
							<span>{{item.msg}}</span>
						</p>
					</router-link>
				</li>
			</ul>	
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MainList',
		data() {
			return {
				twoList: [
					{id: 1,imgURL: 'img/seazon1.jpg',title: '王者归来',msg: '牛背山'},
					{id: 2,imgURL: 'img/seazon2.jpg',title: '高铁开通',msg: '西双版纳'},
					{id: 3,imgURL: 'img/seazon3.jpg',title: '冰雪仙境',msg: '九寨沟'},
				],
				twoList1 : [
					{ id:1 , name:'长白山'},
					{ id:2 , name:'潮汕'},
					{ id:3 , name:'林芝'},
					{ id:4 , name:'怒江'},
					{ id:4 , name:'四姑娘山'},
					{ id:4 , name:'泉州',msg:'冰雪天池'},
				]
			}
		},
	}
</script>

<style scoped>
.MainList {
	width: 100%;
	height: 100%;
}
.tab2-bottom ol {
	margin-top: 0.2rem;
	display: flex;
}
.tab2-bottom ol li {
	width: 100%;
	height: 100%;
	position: relative;
}
.tab2-bottom ol li:nth-child(even){
	float: right;
}
.tab2-bottom ol li a {
	width: 100%;
	height: 70%;
	float: left;
	margin-top: 0.3rem;
}
.tab2-bottom ol li img{
	width: 99%;
	height: 3.5rem;
	margin-left: 0.2rem;
	border-radius: 0.1rem;
}
.tab2-bottom ol li p span:nth-child(1){
	top: 80%;
	text-indent: 3.5em;
	color:white;
	font-size: 0.35rem;
	line-height: 0.45rem;
	position: absolute;
}
.tab2-bottom ol li p span:nth-child(2){
	top: 65%;
	left: 35%;
	color: white;
	font-size: 0.45rem;
	line-height: 0.45rem;
	position: absolute; 
	font-weight: bold;
}
.tab3-bottom{
	width: 100%;
	overflow: hidden;
	margin-top: 0.2rem;
}
.tab3-bottom ul li p{
	width: 30%;
	float: left;
	text-align: center;
	line-height: 1rem;
	margin-left: 0.2rem;
	margin-top: 0.2rem;
	font-weight: bold;
	font-size: 0.35rem;
	color: black;
	background-color: #FFFFFF;
	border: 2px solid gainsboro;
	border-radius: 0.15rem;
}

.tab3-bottom ul li p span:nth-child(2){
	width: 1.2rem;
	font-size: 0.25rem;
	line-height: 0.45rem;
	position: absolute;
	background-color: #ffdd3f;
	border-radius: 0.15rem 0 0.3rem 0;
}
</style>
